<template>
  <div>
    <div id="histogram"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    Histogram() {
      var histogram = echarts.init(document.getElementById("histogram"));
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
            orient: "vertical",
            // top: "center",
            left:0,
             textStyle:{
                color:"#fff",
            }
        },
        series: [
          {
            name: "合作医院",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: '{b}: {d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "中心医院" },
              { value: 735, name: "中医院" },
              { value: 580, name: "新华医院" },
              { value: 484, name: "西医院" },
            ],
          },
        ],
      };
      histogram.setOption(option);
    },
  },
  mounted() {
    this.Histogram();
  },
};
</script>

<style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
  //   display: flex;
  .histogram_one {
    width: 100%;
    height: 100%;
    // background-color: aqua;
  }
}
</style>
